<template>
  <el-dialog :title="option.title" :visible.sync="option.isShow" width="40%" :close-on-click-modal="false"
    @open="openDialog" @close="closeDialog('ruleForm')">
    <el-row :gutter="10">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-col :span="21" v-if="option.flag=='update'">
          <el-form-item label="ID" prop="ID">
            <el-input v-model="ruleForm.ID" size="small" disabled placeholder="请输入ID"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="表列字段" prop="COLUMNID">
            <el-select v-model="ruleForm.COLUMNID" @change="changeData" size="small" filterable clearable placeholder="请选择表列字段">
              <el-option v-for="item in option.dataOption" :key="item.FIELDKEY" :label="item.FIELDKEY+'-'+item.FIELDVALUE"
                :value="item.FIELDKEY"></el-option>
            </el-select>
            <!-- <el-input v-model="ruleForm.COLUMNID" size="small" placeholder="请输入表列字段"></el-input> -->
          </el-form-item>
        </el-col>
        <!-- <el-col :span="21">
          <el-form-item label="表列名" prop="COLUMNNAME">
            <el-input v-model="ruleForm.COLUMNNAME" size="small" placeholder="请输入表列名"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="21">
          <el-form-item label="规则条件" prop="ROLELEVEL">
            <el-input v-model="ruleForm.ROLELEVEL" size="small" placeholder="请输入规则条件"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="添加名" prop="ROLELEVELNAME">
            <el-input v-model="ruleForm.ROLELEVELNAME" size="small" placeholder="请输入添加名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import addData from "@/message/QCManage/sampleManage/sampleDictionary/sampleDictionaryAdd";
  import updateData from "@/message/QCManage/sampleManage/sampleDictionary/sampleDictionaryUpdate";

  export default {
    props: {
      option: Object
    },
    computed: {
      isShow: {
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    mounted() {},
    data() {
      return {
        ruleForm: {
          COLUMNID: '', //表列字段
          ID: '', //字段在文件中的ID
          COLUMNNAME: '', //表列名
          ROLELEVEL: '', //规则条件
          ROLELEVELNAME: '', //添加名
        },
        rules: {
          COLUMNID: [{
            required: true,
            message: '请输入表列字段',
            trigger: 'blur'
          }],
          ID: [{
            required: true,
            message: '请输入ID',
            trigger: 'blur'
          }],
          ROLELEVELNAME: [{
            required: true,
            message: '请输入添加名',
            trigger: 'blur'
          }],
          ROLELEVEL: [{
            required: true,
            message: '请输入规则条件',
            trigger: 'blur'
          }],
          COLUMNNAME: [{
            required: true,
            message: '请输入表列名',
            trigger: 'blur'
          }]
        },
        loading: false,
      };
    },
    created() {

    },
    methods: {
      //选择表列字段的时候触发
      changeData(){
        this.ruleForm.COLUMNNAME = ''
        this.ruleForm.COLUMNNAME = this.findName(this.option.dataOption)
      },
      findName(arr){
        let data = arr.filter(item=>{
          return item.FIELDKEY == this.ruleForm.COLUMNID
        })
        return data[0].FIELDVALUE
      },
      openDialog() {
        if (this.option.flag == 'add') {
          this.ruleForm = {
            COLUMNID: '', //表列字段
            ID: '', //字段在文件中的ID
            COLUMNNAME: '', //表列名
            ROLELEVEL: '', //规则条件
            ROLELEVELNAME: '', //添加名
          }
        } else {
          this.ruleForm = JSON.parse(JSON.stringify(this.option.row));
        }
      },
      closeDialog(formName) {
        this.$refs[formName].clearValidate();
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let resBody
            resBody = this.option.flag == 'add' ? new addData() : new updateData();
            if (this.option.flag == 'update') {
              resBody.data.ID = this.ruleForm.ID
            }
            resBody.data.COLUMNNAME = this.ruleForm.COLUMNNAME
            resBody.data.COLUMNID = this.ruleForm.COLUMNID
            resBody.data.ROLELEVEL = this.ruleForm.ROLELEVEL
            resBody.data.ROLELEVELNAME = this.ruleForm.ROLELEVELNAME
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
              if (this.option.flag == 'update') {
                this.$message({
                  type: 'success',
                  message: '修改成功！'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: '新增成功！'
                })
              }
              this.isShow = false;
              this.$emit("refreshTable");
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD
                  .ReturnMessage
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].clearValidate();
          this.$refs[formName].resetFields();
        }
      }
    }
  };

</script>

<style scoped>

</style>
